html,
body {
    padding: 0;
    margin: 0;
}
.card {
    background: #fff;
    box-shadow: 5px 5px 10px 0px #eeeeee;
    padding: 8px;
    .title {
        border-left: #007aff 4px solid;
        padding-left: 4px;
        .more {
            display: flex;
            justify-content: center;
            align-items: center;
            .point {
                display: inline-block;
                background: #000;
                width: 4px;
                height: 4px;
                border-radius: 50%;
                margin-right: 4px;
            }
        }
    }
    .content {
        border: #f0ad4e 2px solid;
        padding: 8px;
        .three {
            padding: 8px;
        }
    }
    .text-white {
        color: #fff;
    }
    .text-warning {
        color: #f0ad4e;
    }
    .text-primary {
        color: #007aff;
    }

    .bg-warning {
        background: #f0ad4e;
    }
    .bg-primary {
        background: #007aff;
    }
    .mt {
        margin-top: 10px;
    }
    .br {
        border-radius: 6px;
    }
    .text-center {
        text-align: center;
    }
    .f-w-600 {
        font-weight: 800;
    }
}

.flex {
    display: flex;
}

.flex-column {
    flex-direction: column;
}

.align-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.flex-center {
    justify-content: center;
    align-items: center;
}

.flex-between {
    justify-content: space-between;
}

.flex-around {
    justify-content: space-around;
}

.flex-start {
    justify-content: flex-start;
}

.flex-end {
    justify-content: flex-end;
}

.flex-worp {
    flex-wrap: wrap;
}
